<template>
    <div>
        <!-- 头部 -->
        <van-nav-bar title="购物车" left-arrow @click-left="$router.back()">
            <template #right>
                <van-icon name="ellipsis" />
            </template>
        </van-nav-bar>
        <!-- 卡片 -->
        <van-swipe-cell v-for="item in store.cartList" :key="item.goodsId">
            <template #right>
                <van-button square type="danger" text="删除" class="del" @click="delCartList(item.cartItemId)" />
            </template>
            <template #default>
                <div class="goods">
                    <van-checkbox v-model="item.checked"></van-checkbox>
                    <van-card :num="item.goodsCount" :price="item.sellingPrice" :title="item.goodsName"
                        :thumb="item.goodsCoverImg">
                        <template #num>
                            <van-stepper v-model="item.goodsCount" @change="change(item)" />
                        </template>
                    </van-card>
                </div>
            </template>
        </van-swipe-cell>
        <!-- submit -->
        <van-submit-bar :price="allPrice" button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="allChecked">全选</van-checkbox>
            <template #tip>
                你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
            </template>
        </van-submit-bar>
    </div>
</template>
<script setup>
import { useRouter, useRoute } from "vue-router"
import { computed, onMounted, ref } from "vue";
import { useCart } from "@/store/cartStore.js"
import { showConfirmDialog } from 'vant';
import { storeToRefs } from "pinia"
let store = useCart()
let router = useRouter()
onMounted(() => {
    store.getCartListAsync()
})
// 存储购物车选中商品的ids
let cartCheckedIds = ref([])
let { cartList } = storeToRefs(store)
// 步进器
let change = (item) => {
    store.putCart(item.cartItemId, item.goodsCount)
}
// 删除购物车中商品
let delCartList = (id) => {
    showConfirmDialog({
        message:
            '确认删除',
    })
        .then(() => {
            // on confirm
            store.deleteCartListAsync(id)
        })
}
let onSubmit = () => {
    cartList.value.filter(item => {
        if (item.checked) {
            cartCheckedIds.value.push(item.cartItemId)
        }
    })
    localStorage.setItem('cartCheckedIds', cartCheckedIds.value)
    router.push('/addressList')
}
// 计算总价 
let allPrice = computed(() => {
    return store.cartList.reduce((prev, next) => {
        return (prev + (next.checked ? next.goodsCount * next.sellingPrice * 100 : 0))
    }, 0)
})
let allChecked = computed({
    get() {
        if (store.cartList.length == 0) {
            return false
        }
        return store.cartList.every(item => item.checked == true)
    },
    set(val) {
        store.cartList.forEach(item => item.checked = val);
    }
})
</script>
<style lang="less" scoped>
.van-swipe-cell {
    margin-top: 5px;

    .del {
        height: 100%;
    }

    .goods {
        height: 100%;
        display: flex;

        .van-checkbox {
            padding: 0 10px;
        }

        .van-card {
            width: 90%;
            margin-top: 0;
        }
    }
}
</style>